import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import { Button } from 'antd';

import {
  WeaRightMenu,
  WeaLeftRightLayout,
  WeaTop,
  WeaTab,
  WeaSearchGroup,
  WeaLeftTree,
  WeaErrorPage,
  WeaTools,
  WeaLocaleProvider,
} from 'ecCom';

import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import DocDetailConstant from '../util/DocDetailConstant';
import CustomButton from './DocLog/CustomButton';
const getLabel = WeaLocaleProvider.getLabel;
let quickSearchPara = '';

let MODULE = 'DocLog';

let DOCID = 0;

@inject('docLogStore')
@observer
class DocLogTable extends React.Component {
  constructor(props) {
    super(props);
    this.onRightMenuClick = this.onRightMenuClick.bind(this);
  }

  componentDidMount() {
    // 一些初始化请求
    const { docLogStore } = this.props;
    let docid = this.props.docid;
    DOCID = docid;
    docLogStore.getConditionInfo();
    docLogStore.doSearch({ docid });
    docLogStore.getTopTab({ docid });
    docLogStore.getRightMenu();
  }

  componentWillReceiveProps(nextProps) {
    const { docLogStore } = this.props;
    const { docid } = this.props;
    if (docid && DOCID != docid) {
      DOCID = docid;
      docLogStore.doSearch({ docid });
    }
  }
  setShowSearchAd = bool => {
    const { docLogStore } = this.props;
    docLogStore.setShowSearchAd(bool);
  }
  hideSearchAd = () => {
    const { docLogStore } = this.props;
    docLogStore.setShowSearchAd(false);
  }
  onChange = (key) => {
    const { docLogStore, docid } = this.props;
    const { form } = docLogStore;
    docLogStore.setShowSearchAd(false);
    // docLogStore.saveFields({...fields, topTabKey: {name: 'viewcondition', value: key}});
    form.reset();
    docLogStore.saveFields({ topTabKey: { name: 'viewcondition', value: key } });
    docLogStore.doSearch({ docid });
  }
  onSearch = v => {
    const { docLogStore, docid } = this.props;
    docLogStore.doSearch({ docid });
  }
  onSearchChange = (v) => {
    const { docLogStore } = this.props;
    let fields = toJS(docLogStore.fields);
    docLogStore.saveFields({
      ...fields,
      [quickSearchPara]: { name: `${quickSearchPara}`, value: v },
    });
  }
  render() {
    const { docLogStore, docid } = this.props;
    const { tableStore, showSearchAd, topTab, tabType = 'line',
      searchType = ['advanced'], hasOrder = true, needScroll = true, form } = docLogStore;
    let fields = toJS(docLogStore.fields);
    return (
      <div style={{ height: '100%' }}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xav7y2`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ziohyi`}
            type={tabType}
            buttonsAd={this.getTabButtonsAd()}
            searchType={searchType}
            searchsBaseValue={fields[quickSearchPara] && fields[quickSearchPara].value}
            searchsAd={this.getSearchs()}
            showSearchAd={showSearchAd}
            setShowSearchAd={this.setShowSearchAd}
            hideSearchAd={this.hideSearchAd}
            datas={toJS(topTab)}
            selectedKey={this.getSelectedKey()}
            keyParam="viewcondition" // 主键
            onChange={this.onChange}
            onSearch={this.onSearch}
            onSearchChange={this.onSearchChange}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@zpyc3p`}
            comsWeaTableStore={tableStore}
            hasOrder={hasOrder}
            needScroll={needScroll}
            uniqueId={true}
          />
        </WeaRightMenu>
      </div>

    );
  }

  getRightMenu() {
    const { docLogStore } = this.props;
    const { tableStore, rightMenu } = docLogStore;
    const selectedRowKeys = toJS(tableStore.selectedRowKeys);
    let _disabled = !(selectedRowKeys && selectedRowKeys.length !== 0);
    let btnArr = [];
    Array.isArray(rightMenu) && rightMenu.map((m) => {
      btnArr.push({
        icon: <i className={m.menuIcon} />,
        content: m.menuName,
        disabled: m.isControl == '1' && _disabled,
      });
    });
    return btnArr;
  }

  getSelectedKey = () => {
    const { docLogStore } = this.props;
    const { topTab, topTabKey } = docLogStore;
    let selectedTab = '';
    topTab && toJS(topTab).forEach((t) => {
      if (t.selected) {
        selectedTab = t.viewcondition;
      }
    });
    topTabKey && (selectedTab = topTabKey);
    return selectedTab;
  }

  onRightMenuClick(key) {
    const { docLogStore, docid } = this.props;
    const { tableStore, rightMenu } = docLogStore;
    const selectedRowKeys = toJS(tableStore.selectedRowKeys);

    Array.isArray(rightMenu) && rightMenu.rightMenus.map((m, i) => {
      if (Number(key) == i) {
        let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
        if (fn == '') {
          if (m.type == 'BTN_SEARCH') { // 搜索
            docLogStore.doSearch({ docid });
          }
        }
      }
    });
  }

  getButtons() {
    const { docLogStore } = this.props;
    const { tableStore, rightMenu } = docLogStore;
    const selectedRowKeys = toJS(tableStore.selectedRowKeys);
    let btnArr = [];
    Array.isArray(rightMenu) && rightMenu.rightMenus.map((m) => {
      let fn = m.menuFun.indexOf('this') >= 0 ? `${m.menuFun.split('this')[0]})` : m.menuFun;
      m.isTop == '1' && btnArr.length < 4 && btnArr.push(
        <CustomButton
          ecId={`${this && this.props && this.props.ecId || ''}_Button@pau5nn@${m.menuName}`}
          type="primary"
          disabled={!(selectedRowKeys && selectedRowKeys.length != 0)}
          fn={fn}
        >
          {m.menuName}
        </CustomButton>
      );
    });
    return btnArr;
  }

  getSearchs() {
    const { docLogStore } = this.props;
    const { conditionInfo, form } = docLogStore;
    return form.isFormInit && DocDetailConstant.getSearchs(toJS(conditionInfo), form, { col: 2 });
  }
  doSearch = () => {
    const { docLogStore, docid } = this.props;
    docLogStore.doSearch({ docid });
    docLogStore.setShowSearchAd(false);
  }
  resetForm = () => {
    const { docLogStore } = this.props;
    const { form } = docLogStore;
    form.reset();
  }
  onCancel = () => {
    const { docLogStore } = this.props;
    docLogStore.setShowSearchAd(false);
  }
  getTabButtonsAd() {
    const { docLogStore, docid } = this.props;
    const { form } = docLogStore;
    return [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vy2qk8@doclog-search`}
        type="primary"
        onClick={this.doSearch}
      >{getLabel(197, '搜索')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7vub42@doclog-reset`}
        type="ghost"
        onClick={this.resetForm}
      >{getLabel(2022, '重置')}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xtogox@doclog-cancel`}
        type="ghost"
        onClick={this.onCancel}
      >{getLabel(31129, '取消')}</Button>),
    ];
  }
}

// 组件检错机制
class MyErrorHandler extends React.Component {
  render() {
    const hasErrorMsg = this.props.error && this.props.error !== '';
    return (
      <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@uimt33`} msg={hasErrorMsg ? this.props.error : '对不起，该页面异常，请联系管理员！'} />
    );
  }
}

DocLogTable = WeaTools.tryCatch(React, MyErrorHandler, { error: '' })(DocLogTable);

export default DocLogTable;
